﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ManageOrder1.aspx.cs" Inherits="repeater_ManageOrder1" %>

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin"
	TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui"
	TagPrefix="je" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>管理订单</title>
	<link rel="stylesheet" type="text/css" href="../css/smoothness/jquery-ui-1.8.15.custom.css" />
	<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.15.custom.min.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.datepicker-zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/main.css" />
	<style type="text/css">
		#list
		{
			width: 80%;
		}
		#pageindex
		{
			color: #009900;
			width: 20px;
		}
		.tip
		{
			text-align: center;
			color: Red;
		}
		.id
		{
			color: Green;
		}
		.address
		{
			color: Blue;
		}
		.buyer
		{
			cursor: pointer;
		}
		.detail
		{
			display: none;
		}
		.edit-item
		{
			background-color: Green;
		}
		.inserted-item
		{
			background-color: #cccccc;
		}
	</style>
	<script type="text/javascript">
		function displayAddress(address) {

			if (address.length > 10)
				return '<span title="' + address + '">' + address.substring(0, 7) + '...</span>';
			else
				return address;

		}

		var tipCount = 0;

		var mask = {
			amount: {
				type: 'number',
				need: true,
				max: 10,
				min: 1,
				tip: '数量需要在 1-10 之间'
			},
			price: {
				type: 'number',
				need: true,
				max: 10000,
				min: 1000,
				tip: { type: '单价是一个数字', need: '请填写单价', max: '单价不能超出 10000', min: '单价不能小于 1000' }
			},
			buyer: {
				type: 'string',
				need: true,
				max: 10,
				min: 3,
				tip: '购买者长度需要在 3-10 之间'
			},
			address: {
				type: 'string',
				min: 1,
				max: 100,
				tip: '地址不能为空, 长度不能大于 100'
			},
			orderdate: {
				type: 'date',
				tip: '需要一个合法的日期'
			},
			iscompleted: {
				type: 'boolean',
				defaultvalue: false
			}
		};
	</script>
</head>
<body>
	<form id="formManageOrder1" runat="server">
	<div class="title purple-title">
		管理订单
		<iframe src="../about.htm" frameborder="0" height="160" width="100%" allowtransparency="true" scrolling="no"></iframe>
	</div>
	<div class="content">
		<h2>
			说明
		</h2>
		<blockquote>
			本示例使用 Access 数据库.<br />
			<br />
			<strong>视频解说:</strong> <a href="http://www.tudou.com/programs/view/f44DaiWHcGE/" target="_blank">
				www.tudou.com/programs/view/f44DaiWHcGE/</a>
		</blockquote>
		<h2>
			示例
		</h2>
		<blockquote>
			<table id="list" cellpadding="7" cellspacing="0" class="ui-widget ui-corner-all ui-widget-content">
				<je:Repeater ID="orderList" runat="server" Selector="'#list'" IsVariable="true" PageSize="2" FieldMask="mask"
					FillAsync-Url="webservice.asmx" FillAsync-MethodName="GetOrders" UpdateAsync-Url="webservice.asmx"
					UpdateAsync-MethodName="ModifyOrder" InsertAsync-Url="webservice.asmx" InsertAsync-MethodName="CreateOrder" Filled="
					function(pe, e){
						orderList.__repeater('showtip', e.custom.message);
					}
					" PreUpdate="
					function(pe, e){
						e.row.sum = e.row.price * e.row.amount;
						orderList.__repeater('showtip', '提交数据...');
					}
					" Updated="
					function(pe, e){

						if(e.issuccess)
							orderList.__repeater('showtip', '修改了序号为 ' + e.row.id.toString() + ' 的订单, 目前总金额 ' + e.row.sum.toString());
						else
							orderList.__repeater('showtip', '修改序号为 ' + e.row.id.toString() + ' 的订单失败');

					}
					" PreInsert="
					function(pe, e){
						e.row.sum = e.row.price * e.row.amount;
						orderList.__repeater('showtip', '提交数据...');
					}
					" Inserted="
					function(pe, e){

						if(e.issuccess)
							orderList.__repeater('showtip', '新建了序号为 ' + e.row.id.toString() + ' 的订单, 目前总金额 ' + e.row.sum.toString());
						else
							orderList.__repeater('showtip', '新建序号为 ' + e.row.id.toString() + ' 的订单失败');

					}
					">
					<HeaderTemplate>
						<thead je-class="{header}">
							<tr>
								<td>
									序号
								</td>
								<td>
									购买者
								</td>
								<td>
									地址
								</td>
								<td>
									产品
								</td>
								<td>
									日期
								</td>
								<td>
									操作
								</td>
							</tr>
							<tr>
								<td>
									数量
								</td>
								<td>
									单价
								</td>
								<td>
									总金额
								</td>
								<td colspan="3">
									完成?
								</td>
							</tr>
						</thead>
					</HeaderTemplate>
					<TipTemplate>
						<tr>
							<td colspan="6" class="tip">
								@{tip,'第 ' + (++tipCount).toString() + ' 条消息:' + @}
							</td>
						</tr>
					</TipTemplate>
					<ItemTemplate>
						<tr je-class="{state}-item">
							<td class="id">
								#{id}
							</td>
							<td class="buyer" onclick="javascript:$('##{id}_detail').toggleClass('detail');">
								<strong>#{buyer}</strong>
							</td>
							<td class="address">
								#{address,displayAddress(#)}
							</td>
							<td>
								#{product}
							</td>
							<td>
								#{orderdate,jQuery.panzer.formatDate(#,'yyyy-MM-dd')}
							</td>
							<td>
								<span je-button="label='编辑'" je-onclick="beginedit"></span>
							</td>
						</tr>
						<tr id="#{id}_detail" je-class="{state}-item detail">
							<td>
								#{amount}
							</td>
							<td>
								#{price}
							</td>
							<td>
								#{sum}
							</td>
							<td colspan="3">
								#{iscompleted,# ? '<strong>已经完成</strong>' : '尚未完成'}
							</td>
						</tr>
					</ItemTemplate>
					<EditItemTemplate>
						<tr class="edit-item">
							<td class="id">
								#{id}
							</td>
							<td>
								<input type="text" je-id="buyer" value="#{buyer}" size="5" />
							</td>
							<td>
								<input type="text" je-id="address" value="#{address}" size="15" />
							</td>
							<td>
								<input type="text" je-id="product" value="#{product}" size="9" />
							</td>
							<td>
								<input type="text" je-id="orderdate" je-datepicker="dateFormat='yy-mm-dd'" value="#{orderdate,jQuery.panzer.formatDate(#,'yyyy-MM-dd')}"
									size="10" />
							</td>
							<td>
								<span je-button="label='取消'" je-onclick="endedit"></span><span je-button="label='保存'"
									je-onclick="update"></span>
							</td>
						</tr>
						<tr class="edit-item">
							<td>
								<input type="text" je-id="amount" value="#{amount}" size="2" />
							</td>
							<td>
								<input type="text" je-id="price" value="#{price}" size="4" />
							</td>
							<td>
								?
							</td>
							<td colspan="3">
								<input type="checkbox" je-id="iscompleted" je-checked="#{iscompleted}" />
							</td>
						</tr>
					</EditItemTemplate>
					<NewItemTemplate>
						<tr je-class="{highlight}">
							<td class="id">
								?
							</td>
							<td>
								<input type="text" je-id="buyer" size="5" />
							</td>
							<td>
								<input type="text" je-id="address" size="15" />
							</td>
							<td>
								<input type="text" je-id="product" size="9" />
							</td>
							<td>
								<input type="text" je-id="orderdate" je-datepicker="dateFormat='yy-mm-dd'" size="10" />
							</td>
							<td>
								<span je-button="label='新建'" je-onclick="insert"></span>
							</td>
						</tr>
						<tr je-class="{highlight}">
							<td>
								<input type="text" je-id="amount" size="2" />
							</td>
							<td>
								<input type="text" je-id="price" size="5" />
							</td>
							<td>
								?
							</td>
							<td colspan="3">
								<input type="checkbox" je-id="iscompleted" />
							</td>
						</tr>
					</NewItemTemplate>
					<FooterTemplate>
						<tfoot je-class="{default}">
							<tr>
								<td colspan="6">
									<span je-button="label='上一页'" je-onclick="prev"></span>&nbsp;&nbsp;<span je-button="label='下一页'"
										je-onclick="next"></span>,&nbsp; 第 @{pageindex}/@{pagecount} 页, 共 @{itemcount}
									条, <span je-button="label='跳转'" je-onclick="goto,new Number(jQuery('#pageindex').val())">
									</span>到第
									<input type="text" id="pageindex" value="@{pageindex}" />
									页.
								</td>
							</tr>
						</tfoot>
					</FooterTemplate>
				</je:Repeater>
			</table>
		</blockquote>
	</div>
	</form>
</body>
</html>
<script type="text/javascript">
	$(function () {
		orderList.__repeater('fill');
	});
</script>
